<template>
    <div>
        <div v-if="buttonText!=''">
            <Button @click="userChoseClick" :icon="icon">{{buttonText}}</Button>
            <span @click="clearSelectUser" class="clear">清空已选</span>
            <Collapse simple class="collapse">
                <Panel name="1">
                    已选择
                    <span class="select-count">{{selectUsers.length}}</span> 门
                    <p slot="content">
                        <Tag v-for="(item, i) in selectUsers" :key="i" :name="item.id" color="default" closable @on-close="handleCancelUser">{{item.courseTitle}}</Tag>
                    </p>
                </Panel>
            </Collapse>
        </div>
        <Drawer title="选择课程" closable v-model="userModalVisible" width="800" class-name="drawer" :mask-style="maskStyle">
            <Form ref="searchUserForm" :model="searchUserForm" inline :label-width="55" class="search-form">
                <Form-item label="课程" prop="courseTitle">
                    <Input type="text" v-model="searchUserForm.courseTitle" clearable placeholder="请输入课程" style="width: 200px"/>
                </Form-item>
                <Form-item style="margin-left:-35px;" class="br">
                    <Button @click="handleSearchUser" type="primary" icon="ios-search">搜索</Button>
                    <Button @click="handleResetUser">重置</Button>
                </Form-item>
            </Form>
            <Table :loading="userLoading" border :columns="userColumns" :data="userData" ref="userTable"></Table>
            <Row type="flex" justify="end" class="code-row-bg page" style="margin: 10px 0;">
                <Page :current="searchUserForm.pageNumber" :total="totalUser" :page-size="searchUserForm.pageSize" @on-change="changeUserPage" @on-page-size-change="changeUserPageSize" :page-size-opts="[9,18,36]" size="small" show-total show-elevator show-sizer></Page>
            </Row>
            <div class="drawer-footer">
                已选择
                <span class="select-count">{{selectUsers.length}}</span> 门
                <Button @click="clearSelectUser" style="margin-left:10px">清空已选</Button>
                <Button @click="setSelectAllUser" type="info" style="margin-left:10px">勾选全部</Button>
                <Button @click="userModalVisible=false" type="primary" style="margin-left:10px">关闭</Button>
            </div>
        </Drawer>
    </div>
</template>

<script>
    import {crouseList} from "@/api/bus";
    import departmentChoose from "./department-choose";

    export default {
        name: "courseChoose",
        components: {
            departmentChoose
        },
        props: {
            buttonText: {
                type: String,
                default: "选择用户"
            },
            icon: {
                type: String,
                default: "md-person-add"
            },
            userType:""
        },
        data() {
            return {
                userLoading: true,
                userModalVisible: false,
                selectUsers: [],
                maskStyle:{
                  zIndex:9999
                },
                department: [],
                searchUserForm: {
                    courseTitle: "",
                    type: "",
                    status: "",
                    pageNumber: 1, // 当前页数
                    pageSize: 9, // 页面大小
                    sort: "createTime", // 默认排序字段
                    order: "desc" // 默认排序方式
                },
                userColumns: [
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "课程名称",
                        key: "courseTitle",
                        width: 145,
                        sortable: true
                    },
                    {
                        title: "封面",
                        key: "courseImage",
                        width: 80,
                        align: "center",
                        render: (h, params) => {
                            return h("Avatar", {
                                props: {
                                    src: params.row.courseImage
                                }
                            });
                        }
                    },
                    {
                        title: "课程分类",
                        key: "courseTypeName",
                        width: 120
                    },
                    {
                        title: "讲师名称",
                        key: "userName",
                        width: 115,
                        sortable: true
                    },
                    {
                        title: "视频数量",
                        key: "courseCount",
                        width: 180,
                        sortable: true
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 130,
                        align: "center",
                        fixed: "right",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "info",
                                            size: "small"
                                        },
                                        on: {
                                            click: () => {
                                                this.chooseUser(params.row);
                                            }
                                        }
                                    },
                                    "添加该用户"
                                )
                            ]);
                        }
                    }
                ],
                userData: [],
                totalUser: 0
            };
        },
        methods: {
            userChoseClick(){
                this.getUserDataList();
                this.userModalVisible=true
            },
            showDrawer() {
                this.userModalVisible = true;
            },
            handleSelectDep(v) {
                this.searchUserForm.departmentId = v;
            },
            changeUserPage(v) {
                this.searchUserForm.pageNumber = v;
                this.getUserDataList();
            },
            changeUserPageSize(v) {
                this.searchUserForm.pageSize = v;
                this.getUserDataList();
            },
            getUserDataList() {
                this.userLoading = true;
                crouseList(this.searchUserForm).then(res => {
                    this.userLoading = false;
                    if (res.status === true) {
                        this.userData = res.data.rows;
                        this.totalUser = res.data.total;
                    }
                });
            },
            handleSearchUser() {
                this.searchUserForm.pageNumber = 1;
                this.searchUserForm.pageSize = 9;
                this.getUserDataList();
            },
            handleResetUser() {
                this.$refs.searchUserForm.resetFields();
                this.searchUserForm.pageNumber = 1;
                this.searchUserForm.pageSize = 9;
                this.$refs.dep.clearSelect();
                this.searchUserForm.departmentId = "";
                // 重新加载数据
                this.getUserDataList();
            },
            setSelectUser(v) {
                this.selectUsers = v;
                // this.$emit("on-change", this.selectUsers);
            },
            setSelectAllUser() {
                let data = [];
                this.userData.forEach(e => {
                    let u = {
                        id: e.id,
                        courseTitle: e.courseTitle
                    };
                    data.push(u);
                });
                this.selectUsers = data;
                this.$emit("on-change", data);
            },
            chooseUser(v) {
                // 去重
                let that = this;
                let flag = true;
                this.selectUsers.forEach(e => {
                    if (v.id == e.id) {
                        that.$Message.warning("已经添加过啦，请勿重复选择");
                        flag = false;
                    }
                });
                if (flag) {
                    let u = {
                        id: v.id,
                        courseTitle: v.courseTitle
                    };
                    this.selectUsers.push(u);
                    this.$emit("on-change", this.selectUsers);
                    this.$Message.success(`添加课程 ${v.courseTitle} 成功`);
                }
            },
            clearSelectUser() {
                this.selectUsers = [];
                this.$emit("on-change", this.selectUsers);
            },
            handleCancelUser(e, id) {
                // 删除所选用户
                let newArray = [];
                this.selectUsers.forEach(e => {
                    if (id != e.id) {
                        newArray.push(e);
                    }
                });
                this.selectUsers = newArray;
                this.$emit("on-change", this.selectUsers);
                this.$Message.success("删除所选课程成功");
            }
        },
        created() {

        }
    };
</script>

<style lang="less">
    .clear {
        font-size: 12px;
        margin-left: 15px;
        color: #40a9ff;
        cursor: pointer;
    }
    .collapse {
        font-size: 12px;
        margin-top: 15px;
        width: 500px;
    }

    .drawer-footer {
        z-index: 10;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .select-count {
        font-size: 13px;
        font-weight: 600;
        color: #40a9ff;
    }
    .drawer{
        z-index: 10000;
    }
</style>

